<template>
    <view class="container">
        <view class="video-container">
            <video class="video" :class="{ 'landscape': isLandscape }" :src="getImgFullPath(videoInfo?.videoUrl || '')"
                :autoplay="false" :loop="true" enable-play-gesture enable-fullscreen
                @webkitbeginfullscreen="onEnterFullscreen" @webkitendfullscreen="onExitFullscreen"
                @fullscreenchange="fullscreenchangeFn" @loadedmetadata="videoLoaded($event, videoInfo)"></video>
        </view>
        <view v-if="!isLandscape" class="video-name">{{ videoInfo?.name }}</view>
    </view>
</template>

<script setup lang="ts">
import { ref, onMounted,nextTick } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// API
import { baseApi } from '@/api';

// 工具
import { getImgFullPath } from '@/utils/index';

const dataId = ref('');
const videoInfo = ref({});
const isLandscape = ref(false);
const scaleFactor = ref(1); // 缩放比例，默认为1
const videoRef = ref<HTMLVideoElement | null>(null);
const fullScreen = ref(false)
// 获取视频信息
const getVideoInfo = async () => {
    const { data } = await baseApi.getAdvertisingInfo({
        id: dataId.value
    });
    console.log('视频列表', data);
    videoInfo.value = data;
};

// 兼容移动端浏览器高度自适应
function getWindowConfig() {
  let windowWidth = window.innerWidth;
  let windowHeight = window.innerHeight;
  if (typeof windowWidth !== 'number') {
    if (document.compatMode === 'CSS1Compat') {
      windowWidth = document.documentElement.clientWidth;
      windowHeight = document.documentElement.clientHeight;
    } else {
      windowWidth = document.body.clientWidth;
      windowHeight = window.body.clientHeight;
    }
  }
  return {
    windowWidth: windowWidth,
    windowHeight: windowHeight
  }
}
const swiperHeight = ref('calc(100vh - 102rpx)')
const windowSizeW = ref('100vw')
nextTick(() => {
  const { windowWidth, windowHeight } = getWindowConfig();
  swiperHeight.value = windowHeight - 46 + 'px';
  windowSizeW.value = windowWidth + 'px';
})

onLoad((option: any) => {
    dataId.value = option.id;
    getVideoInfo();
    console.log('视频加载完成');
});

// 处理全屏切换
// 进入全屏
const onEnterFullscreen = () => {
    console.log('进入全屏');
    isLandscape.value = true;
};

// 退出全屏
const onExitFullscreen = () => {
    console.log('退出全屏');
    isLandscape.value = false;
};
const handleFullscreenChange = (e) => {
    console.log(e, '全是错的');

    // if (isFullscreen) {
    //   onEnterFullscreen();
    // } else {
    //   onExitFullscreen();
    // }
};

// 全屏
function fullscreenchangeFn(e: { detail: { fullScreen: boolean } }) {
    fullScreen.value = e.detail.fullScreen
}

// 获取视频宽高
function videoLoaded(e: any, item: any) {
    const { width, height } = e.detail
    // console.log('视频宽高', e, e.detail.width, e.detail.height)
    if (width > height) {
        item.orientation = 0
    }
}


// 切换缩放比例
const toggleScale = () => {
    scaleFactor.value = scaleFactor.value === 1 ? 1.5 : 1;
};

// 防抖函数
const debounce = (fn: Function, delay: number = 300) => {
    let timer: any = null;
    return function (...args: any[]) {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, args);
        }, delay);
    };
};

// 使用防抖处理fullscreenchange事件
onMounted(() => {
    const video = document.querySelector('video');
    if (video) {
        video.addEventListener('fullscreenchange', debounce(handleFullscreenChange));
    }
});
</script>

<style lang="scss" scoped>
//全屏按钮
 
.container {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease-in-out;
    transform-origin: center center;
}

.video-name {
    padding: 0 20rpx;
    font-size: 32rpx;
    box-sizing: border-box;
}

.video-container {
    padding: 20rpx 0;
    overflow: hidden;
}

.video {
    width: v-bind(windowSizeW);
    height: calc(100vh - 200rpx);
}

// .video.landscape {
//     height: 99vh !important;
//     transform: scale(v-bind(scaleFactor));
// }

:deep(.uni-video-fullscreen){
    display: none;
}


</style>